<template>
  <el-tabs type="border-card">
    <el-tab-pane label="流程实例跟踪">
      <!-- <iframe :src="iframeUrl" class="iframe-class"></iframe> -->
      <EWPIGraph></EWPIGraph>
    </el-tab-pane>
    <el-tab-pane label="审批历史">
      <FITable
        id="history"
        :columns="columnsHistory"
        :data="state.historyList"
        :pageConfig="pageConfig"
        :isTableLoading="isTableLoading"
        :show-save-model="false"
        @size-change="handleSizeChange"
        @current-page-change="handleCurrentChange"
      />
    </el-tab-pane>
    <el-tab-pane label="相关参数">
      <FITable
        id="info"
        :columns="columnsInfo"
        :data="state.infoList"
        :pageConfig="pageConfig2"
        :isTableLoading="isTableLoading2"
        :show-save-model="false"
        @size-change="handleSizeChange2"
        @current-page-change="handleCurrentChange2"
      />
    </el-tab-pane>
  </el-tabs>
</template>
<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue'
import FITable from '@/components/FITable/index.vue'
import EWPIGraph from '../EWPIGraph/index.vue'
import { apiRequestPost } from '@/api/globalApi.js'
import type { PageConfig, Column } from '@/types/components'
import { useRoute } from 'vue-router'

// 路由对象
const route = useRoute()

// 表格是否显示加载中
const isTableLoading = ref(false)
const isTableLoading2 = ref(false)
const state = reactive({
  // 查询条件
  query: {
    processInstanceId: route.query.id,
    current: 1,
    size: 10,
  },
  query2: {
    processInstanceId: route.query.id,
    current: 1,
    size: 10,
  },
  // 表格数据
  historyList: [],
  infoList: [],
})
// 页面配置
const pageConfig: PageConfig = reactive({
  total: 0, // 总条数
  currentPage: 1, // 当前页码
})
const pageConfig2: PageConfig = reactive({
  total: 0, // 总条数
  currentPage: 1, // 当前页码
})
const iframeUrl = `http://testcr.ouyeelf.com/portal-vue/workflowTrack.html?processInstanceId=${route.query.id}`

// 表格列数据
const columnsHistory: Column[] = reactive([
  {
    label: '任务名称',
    prop: 'taskName',
    align: 'center',
    width: '150',
  },

  {
    label: '开始时间',
    prop: 'startTime',
    align: 'center',
    width: '160',
    editType: 'date-picker',
  },
  {
    label: '结束时间',
    prop: 'endTime',
    align: 'center',
    width: '160',
    editType: 'date-picker',
  },
  {
    label: '持续时间',
    prop: 'duration',
    align: 'center',
    width: '200',
  },
  {
    label: '执行人',
    prop: 'completerFullname',
    align: 'center',
    width: '120',
  },
  {
    label: '负责人',
    prop: 'assigneeFullname',
    align: 'center',
    width: '150',
  },
  {
    label: '委派人',
    prop: 'consigneeFullname',
    align: 'center',
    width: '150',
  },
  {
    label: '审批意见',
    prop: 'opinion',
    align: 'center',
    minWidth: '300',
  },
])
const columnsInfo: Column[] = reactive([
  {
    label: '名称',
    prop: 'key',
    align: 'center',
    width: '200',
  },
  {
    label: '类型',
    prop: 'type',
    align: 'center',
    width: '150',
    editType: 'select',
    editConfig: {
      options: [
        // 下拉框选项
        { value: 'string', label: '字符串' },
        { value: 'integer', label: '整数' },
        { value: 'finish', label: '结束' },
        { value: 'short', label: '短整型' },
        { value: 'long', label: '长整型' },
        { value: 'double', label: '浮点数' },
        { value: 'boolean', label: '布尔值' },
        { value: 'date', label: '日期' },
        { value: 'binary', label: '二进制变量' },
        { value: 'serializable', label: '可序列化对象' },
      ],
    },
  },
  {
    label: '值',
    prop: 'value',
    align: 'center',
    width: '250',
  },
  {
    label: '活动名称',
    prop: 'activityName',
    align: 'center',
    width: '200',
  },
  {
    label: '执行ID',
    prop: 'executionId',
    align: 'center',
    width: '280',
  },

  {
    label: '相关数据ID',
    prop: 'id',
    align: 'center',
    minWidth: '250',
  },
])

// 分页大小改变回调函数
const handleSizeChange = (e) => {
  pageConfig.pageSize = e
  pageConfig.currentPage = 1
  searchFn()
}
const handleSizeChange2 = (e) => {
  pageConfig2.pageSize = e
  pageConfig2.currentPage = 1
  searchFn2()
}
// 分页页码改变回调函数
const handleCurrentChange = (e) => {
  pageConfig.currentPage = e
  searchFn()
}
const handleCurrentChange2 = (e) => {
  pageConfig2.currentPage = e
  searchFn2()
}

// 搜索查询函数
const searchFn = (type?: string, columnsVal?: any) => {
  // 页面搜索数据组装
  state.query.current = pageConfig.currentPage
  isTableLoading.value = true
  if (pageConfig.pageSize) state.query.size = pageConfig.pageSize
  // const apiUrl = proxy.$Button_api('/bpm-service/procInstInfo/queryProVariable', route.name)
  apiRequestPost('/bpm-service/ProcInstInfo/queryTaskOpinion', state.query)
    .then((res) => {
      isTableLoading.value = false
      if (res.data.success) {
        state.historyList = res.data.data.result

        pageConfig.pageSize = Number(res.data.data.size)
        pageConfig.total = Number(res.data.data.count)
      } else {
        // useMessage().error(res.data.message)
      }
    })
    .catch((error: any) => {
      isTableLoading.value = false
      // 处理错误
    })
}
// 搜索查询函数
const searchFn2 = (type?: string, columnsVal?: any) => {
  // 页面搜索数据组装
  state.query2.current = pageConfig2.currentPage
  isTableLoading2.value = true
  if (pageConfig2.pageSize) state.query2.size = pageConfig2.pageSize
  // const apiUrl = proxy.$Button_api('/bpm-service/procInstInfo/queryProVariable', route.name)
  apiRequestPost('/bpm-service/ProcInstInfo/queryProVariable', state.query2)
    .then((res) => {
      isTableLoading2.value = false
      console.log('res.data.data.result----', res.data)
      if (res.data.success) {
        state.infoList = res.data.data.result
        console.log('res.data.data.result----2', state.infoList)
        pageConfig2.pageSize = Number(res.data.data.size)
        pageConfig2.total = Number(res.data.data.count)
      } else {
        // useMessage().error(res.data.message)
      }
    })
    .catch((error: any) => {
      isTableLoading2.value = false
      // 处理错误
    })
}

onMounted(() => {
  searchFn()
  searchFn2()
})
</script>
<style lang="less" scoped>
::v-deep(.el-tabs__content) {
  min-height: calc(100vh - 180px);
}
.date-range-class {
  display: flex !important;
  ::v-deep(.el-form-item__content) {
    width: 220px !important;
    display: flex !important;
    justify-content: space-between !important;
    .el-input__prefix {
      display: none !important;
    }
    .el-input {
      width: 107px !important;
    }
  }
}
.iframe-class {
  width: 100%;
  height: calc(100vh - 220px);
}
</style>
